<template>
	<view>
		<!-- 勿删! 用于处理 IOS bug ，频繁触发视图渲染解决同层渲染bug -->
		<!-- controls 若为 true 可删 -->
		<view :style="{display:updateView ? 'block' : 'none'}" />
		<view class="stip">
			可上下滑动
		</view>
		<swiper class="sv-swiper" :duration="500" :vertical="true" circular @change="swiperChange" :current="currentEx">
			<!-- 此处不能加 key，加key会导致回弹失效。 -->
			<swiper-item v-for="(item,i) in showList" :key="i">
				<view class="sv-item">
					<!-- 11.16 拼接与非拼接 -->
					<video :direction="0" :id="'video' + i" class="sv-video" :src="item.url" :controls="false"
						:show-loading="false" :show-mute-btn="false" :loop="true" :autoplay="false"
						:show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false"
						@click="changeVideoState" v-if="item.url != null && item.url != ''" />
					<!-- 11.16 多视频拼接（珠宝店主） -->
					<view class="" v-else>
						<video :direction="0" :id="'video' + i" class="sv-video"
							:src="item.goodslist.videourl[videocidx]" :controls="false" :show-loading="false"
							:show-mute-btn="false" :loop="true" :autoplay="item.autoplay" :show-fullscreen-btn="false"
							:show-play-btn="false" :show-center-play-btn="false" @click="changeVideoState"
							@ended="ends" />
					</view>
					<!-- 内容区域 -->
					<block v-if="item.index != -1">
						<operation :itemInfo.sync="item" :targetype.sync="targetype" :swilist.sync="showList" />
						<view class="content-ne">
							<!-- 9.9 -->
							<view class="u-line-1 nickne" v-if="item.user.nickname" @click="tomine(item.user.id)">
								{{'@' + item.user.nickname}}
							</view>
							<!-- <view class="" @click="tomine">
								@{{item.user.nickname}}
							</view> -->
							<view class="store cross-center" v-if="item.goodslist.vdian_url != ''"
								@click="jump(item.goodslist.vdian_url,item.id)">
								<image :src="item.user.userInfo.avatar" mode=""></image>
								<view class="u-line-1" style="max-width: 520rpx;">
									{{item.user.nickname}} 的珠宝店
								</view>
							</view>
							<view class="commodity" v-if="item.goodslist.goodlist.length > 0">
								<!-- <scroll-view scroll-x="true">
									<view class="sc-z">
										<view class="item-good dir-left-nowrap" v-for="(it,idx) in item.goodslist"
											v-if="it.length != 0" :key="idx" @click="shopDetail(it,item.id)">
											<view class="image-view cover-pic">
												<image class="img" :src="it.cover_pic"></image>
												<view class="no-goods" v-if="it.goods_stock == 0">
													已售
												</view>
											</view>
											<view class="content dir-top-nowrap main-between">
												<view class="name t-omit-two">{{it.name}}</view>
												<view class="pri-but dir-left-nowrap main-between cross-bottom">
													<view class="pri">
														<text class="price"
															:class="sign === 'gift' ? theme + '-color '+ theme : getTheme + '-m-text '+ getTheme">定金￥{{it.price}}</text>
														<view class="subtitle">去实体店体验</view>
													</view>
													<view class="button" v-if="it.goods_stock == 0">已售</view>
													<view class="button" @click="shopDetail(it,item.id)" v-else>查看详情
													</view>
												</view>
											</view>
										</view>
									</view>
								</scroll-view> -->
								<swiper autoplay class="swiper" interval="3000" circular next-margin="90rpx">
									<swiper-item v-for="(it,idx) in item.goodslist.goodlist" v-if="it.length != 0"
										:key="idx" @click="shopDetail(it,item.id)">
										<view class="item-good dir-left-nowrap">
											<view class="image-view cover-pic">
												<image class="img" :src="it.cover_pic"></image>
												<view class="no-goods" v-if="it.goods_stock == 0">
													已售
												</view>
											</view>
											<view class="content dir-top-nowrap main-between">
												<view class="name t-omit-two">{{it.name}}</view>
												<view class="pri-but dir-left-nowrap main-between cross-bottom">
													<view class="pri">
														<text class="price"
															:class="sign === 'gift' ? theme + '-color '+ theme : getTheme + '-m-text '+ getTheme">定金￥{{it.price}}</text>
														<view class="subtitle">去实体店体验</view>
													</view>
													<view class="button" v-if="it.goods_stock == 0">已售</view>
													<view class="button" @click="shopDetail(it,item.id)" v-else>查看详情
													</view>
												</view>
											</view>
										</view>
									</swiper-item>
								</swiper>
							</view>

							<view class="debug" @click="openall" v-if="!openit">
								<view class="u-line-1" v-if="item.catetitle != null">{{item.catetitle}}</view>
								<view class="u-line-1" v-if="item.title != ''">{{item.title}}</view>
								<!-- 10.14 加判断 -->
								<view class="u-line-2" v-if="item.describe">{{item.describe}}</view>
								<!-- <view class="lookat" @click="viewfull">
									点击查看全文
								</view> -->
							</view>
							<view class="nodebug" @click="putall" @touchmove.stop.prevent="moveStop" v-else>
								<view v-if="item.catetitle != null">{{item.catetitle}}</view>
								<view class="title" v-if="item.title != ''">{{item.title}}</view>
								<!-- 10.14 加判断 -->
								<view @touchstart="touchtext" v-if="item.describe">{{item.describe}}
								</view>
							</view>
						</view>
					</block>

					<image class="sv-play" v-show="!videoState" src="../../../static/image/icon/play.png"
						mode="widthFix" />
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import utils from './utils.js';
	import operation from './components/operation.vue';

	// 9.8 加 用户个人主页视频可上下滑动
	let userid = null
	// 测试喜欢和收藏
	// let targetype = -1

	let mallurl = null
	export default {
		components: {
			operation
		},
		data() {
			return {
				baseList: [], // 数据池
				showList: '', // 当前显示的列表
				swiperIndex: 0, // 当前swiper的索引
				videoIndex: 0, // 当前视频播放的索引
				statusbarH: 0, // 状态栏高度
				videoState: true, // 当前视频播放的状态
				defualtVideoId: null, // 默认视频
				currentEx: 0, // 控制回弹字段
				reqLock: false, // 请求锁
				updateView: true, // ios bug
				page: 1,
				limit: 10,
				illheight: 0,
				befheight: 0,
				openit: false,
				keys: new Set(), // 索引，用于去重
				title: '',
				transmit_id: null,
				// 9.8
				targetype: -1,

				// 9.24 搜索 跳转
				pid: 0,
				keyword: '',

				// 11.16 珠宝店视频
				videocidx: 0,
				autoplay: false,
				mall_id: 1
			}
		},
		onLoad: function(option) {
			this.mall_id = option.mall_id || 1
			mallurl = this.$siteInfo.apiroot + '?_mall_id=' + this.mall_id + '&r='
			// 9.8 加 个人主页
			userid = null
			this.targetype = -1
			this.transmit_id = null

			if (option.transmit_id) {
				this.transmit_id = option.transmit_id
			}
			// 9.8 加 个人主页
			if (option.userid) {
				userid = option.userid
			}
			if (option.targetype) {
				this.targetype = option.targetype - 1
			} else {
				this.targetype = -1
			}
			// 9.24 加搜索
			if (option.pid) {
				this.pid = option.pid;
			}
			if (option.keyword) {
				this.keyword = option.keyword;
			}
			const res = wx.getSystemInfoSync()
			this.statusbarH = res.statusBarHeight;
			this.openit = false
			// 带参跳转
			if (option.id) {
				this.defualtVideoId = option.id;
			}
			this.getList();
			this.disposeIosBug();
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
		},
		onHide() {
			this.openit = false
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			}),
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				title: this.showList[this.currentEx].title != '' ? this.showList[this.currentEx].title : this
					.showList[this.currentEx].describe,
				path: '/plugins/sixty/fullscreen/index',
				params: {
					transmit_id: this.userInfo.options.user_id,
					id: this.targetype != -1 ? this.showList[this.currentEx].video_id : this.showList[this
						.currentEx].id,
					mall_id: this.mall_id
				}
			});
		},
		onShareTimeline() {
			return this.$shareTimeline({
				title: this.showList[this.currentEx].title != '' ? this.showList[this.currentEx].title : this
					.showList[this.currentEx].describe,
				query: {
					transmit_id: this.userInfo.options.user_id,
					id: this.targetype != -1 ? this.showList[this.currentEx].video_id : this.showList[this
						.currentEx].id,
					mall_id: this.mall_id
				}
			});
		},
		methods: {
			openall() {
				this.openit = true
				uni.createAnimation()
			},
			tomine(id) {
				uni.navigateTo({
					url: '/plugins/sixty/user-center/user-center?user_id=' + id + '&mall_id=' + this.mall_id
				})
			},
			putall() {
				this.openit = false
			},
			viewfull() {
				this.openit = !this.openit
			},
			touchtext() {

			},

			shopDetail(item, videoid) {
				if (item.goods_stock != 0) {
					this.$storage.setStorageSync('hivideoid', videoid)
					uni.navigateTo({
						url: '/plugins/mch/goods/goods?id=' + item.id + '&mch_id=' + item.mch_id + '&videoid=' +
							videoid + '&mall_id=' + this.mall_id
					})
				}
			},
			jump(item, id) {
				this.$storage.setStorageSync('hivideoid', id)
				uni.navigateTo({
					url: item
				})
			},
			// 处理 IOS controls为false情况下 同层渲染bug代码
			disposeIosBug() {
				setInterval(() => {
					this.updateView = false;
					this.$nextTick(() => {
						this.updateView = true;
					});
				}, 100);
			},
			// （防抖）获取数据列表
			getList(id) {
				// 判断是否存在id 不存在true
				let isId = id == undefined;

				let defualtVideoId = this.defualtVideoId
				let reqLock = this.reqLock
				let baseList = this.baseList
				let videoIndex = this.videoIndex

				baseList = isId ? [] : baseList;

				// 存在并且id相同不再重复加载避免异常错误
				if (defualtVideoId && defualtVideoId == id) {
					uni.showToast({
						title: '暂无更多视频',
						icon: 'none'
					});
					return;
				}

				// 请求数据
				let qdata = {
					page: this.page,
					page_size: this.limit,
					id: !isId ? id : defualtVideoId,
					review_status: 1
				}
				if (this.transmit_id != null) {
					qdata.transmit_id = this.transmit_id
				}
				// 9.8 加 个人主页操作
				if (userid != null) {
					qdata.user_id = userid
					if (userid == this.userInfo.options.user_id) {
						qdata.review_status = 0
					}
				}
				// 9.24 加搜索
				if (this.pid != 0) {
					qdata.pid = this.pid
				}
				if (this.keyword != '') {
					qdata.keyword = this.keyword
				}
				// 测试喜欢和收藏的上下滑动
				let ldata = {
					page: this.page,
					page_size: this.limit,
					video_id: !isId ? id : defualtVideoId,
					review_status: 1
				}
				if (userid != null) {
					ldata.target_id = userid
				}
				if (this.targetype != -1) {
					ldata.target_type = this.targetype
				}

				// 是否能请求
				if (reqLock) {
					return;
				}

				this.reqLock = true;

				// 判断是不是喜欢和收藏出来的 9.8 加
				if (this.targetype != -1) { // 喜欢和收藏的
					// 请求接口
					this.$request({
						url: mallurl + this.$apiUrl.sixty.falist,
						data: ldata,
					}).then((res) => {
						// 9.24
						if (res.data.current.weVideo.title != undefined && res.data.current.weVideo.title !=
							null && res.data.current.weVideo.title != '') {
							uni.setNavigationBarTitle({
								title: res.data.current.weVideo.title
							});
						} else if (res.data.current.weVideo.describe != undefined && res.data.current.weVideo
							.describe != null && res.data.current.weVideo.describe != '') {
							uni.setNavigationBarTitle({
								title: res.data.current.weVideo.describe
							});
						} else if (res.data.current.weVideo.cate.title != undefined && res.data.current.weVideo
							.cate.title != null && res.data.current.weVideo.cate.title != ''
						) { // 10.14 添加无标题也无正文的情况
							uni.setNavigationBarTitle({
								title: res.data.current.weVideo.cate.title
							});
						}
						// uni.setNavigationBarTitle({
						// 	title: res.data.current.describe
						// })
						this.baseList = []
						// id存在表示加载更多视频
						// 不存在id 请求当前赋值
						if (!defualtVideoId) {
							defualtVideoId = this.defualtVideoId = res.data.current.id;
						}
						if (!isId) {
							let arr = parseInt(id) > parseInt(defualtVideoId) ? res.data.lastone : res.data
								.nextone;
							// 下滑加载
							if (parseInt(id) < parseInt(defualtVideoId)) {
								baseList = baseList.concat(arr);
							}
							// 上滑加载
							else {
								baseList.unshift(...arr.reverse());
								if (this.videoIndex == 0) {
									this.videoIndex = videoIndex + arr.length; // 保持当前索引
								}
							}
						} else {
							baseList = baseList.concat(res.data.lastone);
							baseList.push(res.data.current);
							baseList = baseList.concat(res.data.nextone);
						}
						for (let a = 0; a < baseList.length; a++) {
							for (let b = a + 1; b < baseList.length; b++) {
								if (baseList[a].id == baseList[b].id) {
									baseList.splice(b, 1)
								}
							}
						}
						baseList.sort(function(a, b) {
							let m = parseInt(a.id)
							let n = parseInt(b.id)
							if (m < n) {
								return 1
							} else if (m > n) {
								return -1
							} else {
								return 0
							}
						})
						// 重新赋值索引
						let index = 0;
						baseList.forEach(item => {
							item.user = item.weVideo.user
							item.url = item.weVideo.url
							item.catetitle = item.weVideo.cate.title
							item.title = item.weVideo.title
							item.describe = item.weVideo.describe
							item.index = index++;
							if (isId && item.id == this.defualtVideoId) {
								this.videoIndex = item.index;
							}
						});
						this.baseList = baseList
						this.setShowList();
					}).catch(err => {
						this.reqLock = false;
						if (err.msg) {
							uni.showToast({
								icon: 'none',
								title: err.msg
							})
						}
					}).finally(() => {
						this.reqLock = false;
					})
				} else {
					// 请求接口
					this.$request({
						url: mallurl + this.$apiUrl.sixty.videolist,
						data: qdata,
					}).then((res) => {
						// 9.24
						if (res.data.current.title != undefined && res.data.current.title != null && res.data
							.current.title != '') {
							uni.setNavigationBarTitle({
								title: res.data.current.title
							});
						} else if (res.data.current.describe != undefined && res.data.current.describe != null &&
							res.data.current.describe != '') {
							uni.setNavigationBarTitle({
								title: res.data.current.describe
							});
						} else if (res.data.current.catetitle != undefined && res.data.current
							.catetitle != null && res.data.current.catetitle != '') { // 10.14 添加无标题也无正文的情况
							uni.setNavigationBarTitle({
								title: res.data.current.catetitle
							});
						}
						// uni.setNavigationBarTitle({
						// 	title: res.data.current.describe
						// })
						this.baseList = []
						// id存在表示加载更多视频
						// 不存在id 请求当前赋值
						if (!defualtVideoId) {
							defualtVideoId = this.defualtVideoId = res.data.current.id;
						}
						if (!isId) {
							let arr = id > defualtVideoId ? res.data.lastone : res.data
								.nextone;
							// 下滑加载
							if (id < defualtVideoId) {
								baseList = baseList.concat(arr);
							}
							// 上滑加载
							else {
								baseList.unshift(...arr.reverse());
								if (this.videoIndex == 0) {
									this.videoIndex = videoIndex + arr.length; // 保持当前索引
								}
							}
						} else {
							baseList = baseList.concat(res.data.lastone);
							baseList.push(res.data.current);
							baseList = baseList.concat(res.data.nextone);
						}
						for (let a = 0; a < baseList.length; a++) {
							for (let b = a + 1; b < baseList.length; b++) {
								if (baseList[a].id == baseList[b].id) {
									baseList.splice(b, 1)
								}
							}
						}
						baseList.sort(function(a, b) {
							let m = a.id
							let n = b.id
							if (m < n) {
								return 1
							} else if (m > n) {
								return -1
							} else {
								return 0
							}
						})
						// 重新赋值索引
						let index = 0;
						baseList.forEach(item => {
							item.index = index++;
							if (isId && item.id == this.defualtVideoId) {
								this.videoIndex = item.index;
							}
						});
						this.baseList = baseList
						this.setShowList();
					}).catch(err => {
						this.reqLock = false;
						if (err.msg) {
							uni.showToast({
								icon: 'none',
								title: err.msg
							})
						}
					}).finally(() => {
						this.reqLock = false;
					})
				}
			},
			// 滑动改变
			swiperChange(e) {
				this.openit = false
				let newIndex = e.detail.current;
				let oldIndex = this.currentEx;
				this.currentEx = this.swiperIndex = newIndex;
				// console.log('***************************************');
				setTimeout(() => {
					// 判 如果下一个视频没有则进行回弹
					let nowItem = this.showList[newIndex];

					if (nowItem.index != -1) {
						this.videoIndex = nowItem.index;
						this.getList(nowItem.id);
					} else {
						uni.showToast({
							title: '暂无更多视频',
							icon: 'none'
						})
						this.currentEx = oldIndex;
					}
				}, 10)

				this.videoState = true;
			},
			// 对showlist(swiper所展示数据)
			setShowList() {
				// console.log(this.baseList, 7777777, this.defualtVideoId);
				let videoIndex = this.videoIndex;
				// 当前 0
				let swiperIndex = this.swiperIndex;
				let list = this.baseList;

				if (!(list && list.length > 0)) return;

				// 获取当前视频索引的上下视频
				let upVideo, nowVideo, nextVideo, noneVideo = {
					index: -1
				};
				// 获取上下视频然后到 顶/底 时则使用nonevideo占位
				upVideo = list[videoIndex - 1] == undefined ? noneVideo : list[videoIndex - 1];
				nowVideo = list[videoIndex];
				nextVideo = list[videoIndex + 1] == undefined ? noneVideo : list[videoIndex + 1];

				// 获取当前swiperIndex的上下索引
				// 上一个
				let upSwiperIndex = swiperIndex - 1 < 0 ? 2 : swiperIndex - 1;
				// 下一个
				let nextSwiperIndex = swiperIndex + 1 >= 3 ? 0 : swiperIndex + 1;
				// 对showlist进行重新赋值
				let showList = [];



				showList[upSwiperIndex] = upVideo;
				showList[swiperIndex] = nowVideo;
				showList[nextSwiperIndex] = nextVideo;
				this.defualtVideoId = nowVideo.id
				// console.log(showList, 7777777, this.defualtVideoId);

				// console.log(showList);
				// 点赞
				let like = false
				if (showList[swiperIndex].otherdata.is_likes_video == 0) {
					like = false
				} else if (showList[swiperIndex].otherdata.is_likes_video == 1) {
					like = true
				}
				// 关注
				let follow = false
				if (showList[swiperIndex].otherdata.is_focus_video == 0) {
					follow = false
				} else if (showList[swiperIndex].otherdata.is_focus_video == 1) {
					follow = true
				}
				// 收藏
				let star = false
				if (showList[swiperIndex].otherdata.is_favorite_video == 0) {
					star = false
				} else if (showList[swiperIndex].otherdata.is_favorite_video == 1) {
					star = true
				}
				showList[swiperIndex].like = like
				showList[swiperIndex].follow = follow
				showList[swiperIndex].star = star
				showList[swiperIndex].videoLikesNums = showList[swiperIndex].otherdata.videoLikesNums
				showList[swiperIndex].commentNum = showList[swiperIndex].otherdata.videoCommentsNums
				showList[swiperIndex].videoColsNums = showList[swiperIndex].otherdata.videoFavoriteNums
				showList[swiperIndex].forwardNums = showList[swiperIndex].otherdata.follow_num

				// 11.16
				showList[upSwiperIndex].autoplay = false;
				showList[swiperIndex].autoplay = true;
				showList[nextSwiperIndex].autoplay = false;

				this.videocidx = 0

				// console.log(showList, 88888888);
				this.showList = showList
				// console.log(this.showList, 999999999);
				// console.log('-------------------------');

				// 播放当前选择的视频关闭其他的视频
				this.$nextTick(() => {
					uni.createVideoContext(`video${upSwiperIndex}`, this).stop();
					uni.createVideoContext(`video${nextSwiperIndex}`, this).stop();
					uni.createVideoContext(`video${swiperIndex}`, this).play();
				})

			},
			// 修改当前视频的播放状态
			changeVideoState(e) {
				let video = uni.createVideoContext(e.currentTarget.id, this);
				this.videoState ? video.pause() : video.play();
				this.videoState = !this.videoState;
			},
			// 11.16 拼接视频播放
			ends(e) {
				// console.log(e);
				// console.log(this.showList[this.currentEx]);
				let videourl = this.showList[this.currentEx].goodslist.videourl.filter((item) => {
					return item != ''
				})
				// console.log(videourl);
				if (videourl.length > 1) {
					if (this.videocidx < videourl.length - 1) {
						this.videocidx++
						// this.videocurl = videourl[this.videocidx]
						uni.createVideoContext(e.target.id, this).play()
						// this.autoplay = true
						this.showList[this.currentEx].autoplay = true
					} else {
						this.videocidx = 0
						// this.videocurl = videourl[this.videocidx]
					}
				}
			},
			// 返回
			back() {
				uni.navigateBack();
			},
			moveStop() {}
		}
	}
</script>

<style>
	page {
		background-color: #000;
	}
</style>

<style lang="scss" scoped>
	.debug {
		/* position: absolute;
		left: 50rpx;
		bottom: 156rpx; */
		font-size: 28rpx;
		color: #fff;
		width: 86%;
		max-height: 150rpx;
		overflow: hidden;
		// padding: 24rpx 0;
		padding: 24rpx 50rpx 150rpx;

		.lookat {
			font-size: 24rpx;
		}
	}

	.nodebug {
		/* position: absolute;
		left: 0;
		bottom: 0; */
		max-height: 760rpx;
		border-radius: 54rpx 54rpx 0 0;
		font-size: 28rpx;
		text-align: justify;
		color: #fff;
		width: 100%;
		// padding: 24rpx 0;
		padding: 24rpx 50rpx 150rpx;
		margin-top: 24rpx;
		background-color: rgba(0, 0, 0, 0.7);
		overflow-y: scroll;

		.title {
			font-weight: bold;
			font-size: 34rpx;
		}
	}

	.nickne {
		margin: 0 50rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
	}

	.store {
		/* position: absolute;
		left: 50rpx;
		bottom: 300rpx;
		width: 300rpx; */
		max-width: 620rpx;
		width: max-content;
		height: 60rpx;
		background-color: rgba(0, 0, 0, 0.7);
		// background-color: #000;
		color: #fff;
		border-radius: #{120upx};
		// padding: #{0 25upx};
		margin: 0 50rpx;

		image {
			border-radius: 50%;
			width: 50rpx;
			height: 50rpx;
		}

		view {
			font-size: 24rpx;
			padding: 0 24rpx;
		}
	}

	.content-ne {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
	}

	.commodity {
		width: 86%;
		height: 170rpx;
		// background: #FFFFFF;
		color: #353553;
		margin: 20rpx 50rpx 0;

		.sc-z {
			display: inline-flex;
			height: 170rpx;

			.item-good {
				width: 540rpx;
				margin-right: 20rpx;
				background-color: #ffffff;
				border-radius: #{16upx};
				padding: #{0 25upx};
				padding-top: #{25upx};
				overflow: hidden;
				border-top: 1rpx solid #e0e0e0;

				&:first-child {
					border-top: none;
				}

				.image-view {

					position: relative;

					/* >view {
						width: #{150upx};
						height: #{30upx};
						line-height: #{30upx};
						position: absolute;
						bottom: 0;
						font-size: #{18upx};
						color: #ffffff;
						text-align: center;
						background: linear-gradient(to left, #ffcb00, #ff9600);
					} */
				}
			}

			.cover-pic {
				width: #{150upx};
				height: #{150upx};
				position: relative;

				.img {
					width: 120rpx;
					height: 120rpx;
				}

				.no-goods {
					position: absolute;
					top: 0;
					left: 0;
					width: 120rpx;
					height: 120rpx;
					background-color: rgba(0, 0, 0, 0.3);
					margin: 0 auto;
					font-size: 36rpx;
					text-align: center;
					line-height: 120rpx;
					color: #FFFFFF;
					font-weight: bold;
				}
			}

			.content {
				width: calc(100% - #{120upx});
				min-height: #{120upx};
				margin-bottom: #{25upx};
				padding-left: #{25upx};
			}

			.name {
				line-height: #{32upx};
				font-size: #{24upx};
				color: #303030;
				// margin-top: #{8upx};
			}

			.pri-but {

				>.button {
					border-radius: 70rpx;
					font-size: 24rpx;
					font-weight: 100;
					border: 2rpx solid #e59c26;
					padding: 10rpx 20rpx;
				}

				.pri {
					line-height: #{21upx};
					// margin-top: #{9upx};
				}

				.price {
					font-size: #{21upx};
					line-height: 1;
				}

				.original {
					font-size: #{21upx};
					line-height: 1;
					margin-left: #{15upx};
				}

				.subtitle {
					margin: 8rpx 0;
					font-size: 20rpx;
					color: rgba(0, 0, 0, 0.8);
					font-weight: 600;
				}
			}

			.member-price {
				margin-right: #{12upx};
			}
		}

		.swiper {
			height: 170rpx;

			// swiper-item {
			// 	background: #fff;
			// 	border-radius: 16rpx;
			// }

			.item-good {
				width: 540rpx;
				height: 100%;
				margin-right: 20rpx;
				background-color: #ffffff;
				border-radius: #{16upx};
				padding: #{0 25upx};
				padding-top: #{25upx};
				overflow: hidden;
				border-top: 1rpx solid #e0e0e0;

				&:first-child {
					border-top: none;
				}

				.image-view {

					position: relative;

					/* >view {
							width: #{150upx};
							height: #{30upx};
							line-height: #{30upx};
							position: absolute;
							bottom: 0;
							font-size: #{18upx};
							color: #ffffff;
							text-align: center;
							background: linear-gradient(to left, #ffcb00, #ff9600);
						} */
				}
			}

			.cover-pic {
				width: #{150upx};
				height: #{150upx};
				position: relative;

				.img {
					width: 120rpx;
					height: 120rpx;
				}

				.no-goods {
					position: absolute;
					top: 0;
					left: 0;
					width: 120rpx;
					height: 120rpx;
					background-color: rgba(0, 0, 0, 0.3);
					margin: 0 auto;
					font-size: 36rpx;
					text-align: center;
					line-height: 120rpx;
					color: #FFFFFF;
					font-weight: bold;
				}
			}

			.content {
				width: calc(100% - #{120upx});
				min-height: #{120upx};
				margin-bottom: #{25upx};
				padding-left: #{25upx};
			}

			.name {
				line-height: #{32upx};
				font-size: #{24upx};
				color: #303030;
				// margin-top: #{8upx};
			}

			.pri-but {

				>.button {
					border-radius: 70rpx;
					font-size: 24rpx;
					font-weight: 100;
					border: 2rpx solid #e59c26;
					padding: 10rpx 20rpx;
				}

				.pri {
					line-height: #{21upx};
					// margin-top: #{9upx};
				}

				.price {
					font-size: #{21upx};
					line-height: 1;
				}

				.original {
					font-size: #{21upx};
					line-height: 1;
					margin-left: #{15upx};
				}

				.subtitle {
					margin: 8rpx 0;
					font-size: 20rpx;
					color: rgba(0, 0, 0, 0.8);
					font-weight: 600;
				}
			}

			.member-price {
				margin-right: #{12upx};
			}
		}
	}

	.stip {
		position: fixed;
		top: 10rpx;
		right: 10rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		z-index: 999;
	}

	.sv-item,
	.sv-swiper,
	.sv-video {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	.sv-play {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: .8;
		pointer-events: none;
		width: 100rpx;
	}

	.navbar {
		position: fixed;
		top: 0;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		z-index: 99;
	}
</style>
